<template>
    <div>
        <div id="wrap">
            <div class="top_img">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F00%2F06%2F52%2F705629af3545bb6.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669288099&t=5b12dfb24d7457e5e33722bbe052c88e"
                    alt="">
            </div>
            <div class="ava">
                <li v-if="!isLogin">
                    <van-button type="warning" to="/login">立即登录</van-button>
                </li>
                <li v-if="isLogin">
                    <Avatar></Avatar>

                </li>
            </div>
            <div class="main">
                <div class="nologin" v-if="!isLogin">
                    <p>欢迎来到微钓</p>
                    <span>献给热爱户外·垂钓的你~</span>
                </div>
                <div class="top" v-if="isLogin">
                    <section>
                        <span>{{ user.loginname }}</span>
                        <button>黑铁</button>
                    </section>
                    <span>微约ID:{{ user.wei_hao }}</span>
                    <span>等级:{{ user.level }}</span>
                    <div class="tiao"></div>
                    <aside>
                        <span>
                            <b>{{ user.fans.length }}</b>
                            粉丝
                        </span>
                        <span>
                            <b>{{ user.contcern.length }}</b>
                            关注
                        </span>
                        <span>
                            <b>{{ user.collect.length }}</b>
                            收藏
                        </span>
                    </aside>
                </div>
                <div class="my">
                    <main v-if="isLogin">
                        <img src="../../../public/images/1_03.jpg" alt="">
                        <img src="../../../public/images/1_05.jpg" alt="">
                        <img src="../../../public/images/1_07.jpg" alt="">
                        <img src="../../../public/images/1_09.jpg" alt="">
                        <img src="../../../public/images/1_11.jpg" alt="">
                    </main>

                    <div class="center" v-if="isLogin">
                        <img src="../../../public/images/1_19.jpg" alt="">
                    </div>

                    <div class="order">

                        <p>
                            <span>我的订单</span>
                            <van-icon name="shopping-cart-o" />
                        </p>

                        <div class="icon">
                            <router-link to="/order">
                                <span>
                                    <van-icon name="orders-o" size="25px" />
                                    <b>全部订单</b>
                                </span>
                            </router-link>
                            <span>
                                <van-icon name="paid" size="25px" />
                                <b>待发货</b>
                            </span>
                            <span>
                                <van-icon name="logistics" size="25px" />
                                <b>生产/待收货</b>
                            </span>
                            <span>
                                <van-icon name="other-pay" size="25px" />
                                <b>待评价</b>
                            </span>
                            <span>
                                <van-icon name="cash-back-record" size="25px" />
                                <b>退款/售后</b>
                            </span>
                        </div>
                    </div>

                    <div class="tiao"></div>

                    <div class="com">
                        <p>通用功能</p>
                        <div class="many">
                            <span>
                                <van-icon name="pending-payment" size="25px" />
                                <b>钱包</b>
                            </span>
                            <span>
                                <van-icon name="coupon-o" size="25px" />
                                <b>鱼票</b>
                            </span>
                            <span>
                                <van-icon name="gift-card-o" size="25px" />
                                <b>头等</b>
                            </span>
                            <span>
                                <van-icon name="chart-trending-o" size="25px" />
                                <b>成绩</b>
                            </span>
                            <span>
                                <van-icon name="setting-o" size="25px" />
                                <b>设置</b>
                            </span>
                            <span>
                                <van-icon name="friends-o" size="25px" />
                                <b>商务合作</b>
                            </span>
                            <span>
                                <van-icon name="point-gift-o" size="25px" />
                                <b>0元购</b>
                            </span>
                            <span>
                                <van-icon name="shop-collect-o" size="25px" />
                                <b>加盟店</b>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import Avatar from '@/components/avatar.vue';
export default {
    comments: { Avatar },
    data() {
        return {
            user: [],
        };
    },
    computed: {
        author() {
            return this.$store.state.user
        },
        isLogin() {
            return this.$store.state.user.user.token;
        },

    },

    mounted() {
        let users = this.$store.state.user.user
        this.user = users
        console.log(this.user, 'user');
    },

    methods: {

    },
};
</script>

<style scoped lang="scss">
#wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
}

.top_img {
    height: 25vh;
    z-index: 0.2;

    img {
        width: 100%;
        height: 100%;

    }
}

.ava {
    position: absolute;
    right: 5vh;
    top: 18vh;
    z-index: 1;

    li {
        list-style: none;
    }
}

.main {
    height: 75vh;
    width: 100%;
    background: #fff;
    border-radius: 20px 20px 0 0;
    position: absolute;
    top: 20vh;
    left: 0;
    flex: 1;
    overflow-x: hidden;

    .nologin {
        p {
            font-size: 18px;
        }

        span {
            font-size: 12px;
            color: #ccc;
        }
    }

    .top {
        margin: 8px;

        section {

            span {
                font-weight: bold;
                font-size: 20px;
            }

            button {
                border: 0;
                background: #000;
                color: #ccc;
                font-size: 10px;
                border-radius: 5px;
            }
        }

        span {
            font-size: 14px;
            color: #333;
            margin-left: 8px;
        }

        .tiao {
            background: #cccccc;
            width: 70vw;
            height: 3px;
            border-radius: 5px;
            margin: 8px 0;
        }
    }

    .my {
        margin: 8px;

        main {

            img {
                height: 10px;
                margin: 0 3px;
            }
        }

        .center {
            background: #eee;
            height: 50px;

            img {
                height: 100%;
                margin: 5px 5px 5px 10px;
            }
        }

        .order {
            margin-top: 10px;

            p {
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #ccc;
                padding: 10px 0;

                span {
                    margin-left: 10px;
                    font-size: 14px;
                }

                .van-icon {
                    margin-right: 10px;
                }
            }

            .icon {
                display: flex;
                justify-content: space-around;
                align-items: center;

                span {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;

                    .van-icon {
                        margin: 10px 0;
                    }

                    b {
                        font-weight: normal;
                        font-size: 12px;
                    }
                }
            }
        }

        .tiao {
            background: #eee;
            height: 10px;
            margin: 8px 0;
        }

        .com {
            p {
                margin-left: 10px;
                font-size: 14px;
                border-bottom: 1px solid #ccc;
                padding: 5px 0;
            }

            .many {
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                span {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                    margin: 0 18px;

                    .van-icon {
                        margin: 10px 0;
                    }

                    b {
                        font-weight: normal;
                        font-size: 12px;
                    }
                }
            }
        }
    }

}
</style>